/* eslint react/prefer-stateless-function:0, react/prop-types:0 */
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import qs from 'querystring';
import { Button, Form, Icon, Input } from 'antd';
import * as actions from '../../actions/loginAction';
import style from './style.css';
const FormItem = Form.Item;

import zhaoshang from '../../images/zhaoshang.png';
import guotai from '../../images/guotai.png';

@Form.create()
@connect(state => ({
  login: state.login,
}), actions)
export default class extends Component {

  constructor(props) {
    super(props);
    document.title = '登录 - 中正投资官网';
    this.changeInputValue = this.changeInputValue.bind(this);
  }

  changeInputValue(e, key) {
    const val = e.target.value;
    this.props.change(key, val);
  }

  componentDidMount() {
    const seprator = location.hash.indexOf('?');
    const querystring = location.hash.slice(seprator + 1);
    const { type = 1 } = qs.parse(querystring);
    this.props.change('type', +type);
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.login(values);
      }
    });
  };

  render() {
    const { submit, form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={style.container}>
        <Link to={'/'} style={{ position: 'absolute', left: '30px', top: '30px' }}>返回首页</Link>
        <div className={style.logo}></div>
        <div style={{ margin: '0 auto 30px', fontSize: '20px' }}>登录</div>
        <Form onSubmit={this.handleSubmit} className={style.form}>
          <FormItem hasFeedback>
            {getFieldDecorator('username', {
              rules: [
                { required: true, message: '请输入用户名' },
                { validator: this.checkName },
              ],
              validateTrigger: 'onBlur',
            })(
              <Input
                prefix={<Icon type="user" style={{ fontSize: 13 }} />}
                placeholder="请输入用户名"
                onChange={e => this.changeInputValue(e, 'username')}
                type="text"
              />
            )}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                { required: true, message: '请输入密码' },
              ],
              validateTrigger: 'onBlur',
            })(
              <Input
                prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
                placeholder="请输入密码"
                onChange={e => this.changeInputValue(e, 'password')}
                type="password"
              />
            )}

          </FormItem>
          <FormItem>
            <Button className={style.btn} size="large" type="primary" htmlType="submit" onClick={submit}>登录</Button>
          </FormItem>
        </Form>
        <div style={{margin: '0 auto', display: 'flex'}}>
          <div style={{display: 'flex', flexDirection: 'column', margin: '0 60px 0 0'}}>
            <div>
              <img src={zhaoshang} style={{width: '130px', margin: '15px 0 0' }} />
            </div>
            <a style={{margin: '21px 0 0'}} className={style.link} href="https://tgjj.newone.com.cn/login/index" target="_blank">登录招商证券</a>
          </div>
          <div style={{display: 'flex', flexDirection: 'column'}}>
            <div>
              <img src={guotai}  style={{width: '80px'}} />
            </div>
            <a style={{margin: '10px 0 0'}} className={style.link} href="https://pb.gtja.com/equerying" target="_blank">登录国泰君安证券</a>
          </div>
        </div>
        
      </div>
    );
  }
};
